<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { findCategoryAPI } from '@/apis/category.js'
// import { findBannerAPI } from '@/apis/home.js'
import GoodsItem from '../Home/components/GoodsItem.vue'
import { useBanner } from './composables/useBanner.js'

const categoryDate = ref({})
const route = useRoute() // useRoute 获取路由参数
// 定义请求函数
const getCategory = async () => {
  const res = await findCategoryAPI(route.params.id)
  categoryDate.value = res.result
  console.log('分类信息',res)
}
// 生命周期函数
onMounted(() => getCategory())


// 获取Banner数据 解构赋值bannerList
const { bannerList } = useBanner()
/*const bannerList = ref([])
// 定义请求函数
const getBanner = async () => {
  const res = await findBannerAPI({distributionSite:'2'})
  bannerList.value = res.result
  //console.log('Banner图片',res)
}
// 生命周期函数
onMounted(() => getBanner())
*/
</script>

<template>
  <div class="app-category">
    <div class="container">
      <!--面包屑-->
      <div class="bread-group">
        <el-breadcrumb separator=">">
          <el-breadcrumb-item :to="{path:'/'}">首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{categoryDate.name}}</el-breadcrumb-item>
        </el-breadcrumb>
        <!--<div class="bread-item"><RouterLink to="/">首页</RouterLink></div>
        <i class="iconfont icon-angle-right"></i>
        <div class="bread-item"><RouterLink>{{categoryDate.name}}</RouterLink></div>-->
      </div>
      <!--轮播图-->
      <div class="home-banner">
        <el-carousel height="500px">
          <el-carousel-item v-for="item in bannerList" :key="item.id">
            <img :src="item.imgUrl" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <!--全部分类-->
      <div class="sub-filter">
        <h3>全部分类</h3>
        <ul>
          <li v-for="sub in categoryDate.children" :key="sub.id">
            <RouterLink :to="`/category/sub/${sub.id}`">
              <img :src="sub.picture" />
              <p>{{sub.name}}</p>
            </RouterLink>
          </li>
        </ul>
      </div>
      <!--产品列表-->
      <div class="goods-body" v-for="item in categoryDate.children" :key="item.id">
        <div class="head"><h3>{{item.name}}</h3></div>
        <div class="goods-group">
          <div class="goods-cell" v-for="goods in item.goods" :key="goods.id">
            <GoodsItem :goods="goods"></GoodsItem>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.app-category{
  padding-bottom: 40px;
  .bread-group{
    display: flex;
    align-items: center;
    padding: 25px 0;
    .iconfont{
      font-size: 12px;
      margin-left: 5px;
      margin-right: 5px;
      line-height: 22px;
    }
    a:hover{
      color: $xtxColor;
    }
    :deep() {
      .el-breadcrumb__separator{
        font-family: monospace;
      }
    }
  }
  .sub-filter{
    background-color: #fff;
    margin-top: 20px;
    padding: 25px 20px;
    h3{
      text-align: center;
      font-size: 22px;
      font-weight: bold;
      color: #333;
    }
    ul{
      display: flex;
      flex-wrap: wrap;
      margin-left: -10px;
      margin-right: -10px;
      li{
        width: 12.5%;
        padding: 0 10px;
        margin-top: 20px;
        text-align: center;
        img{
          width: 100%;
          height: 132px;
          object-fit: cover;
          border: 1px solid #ededed;
        }
        p{
          font-size: 14px;
          font-weight: bold;
          color: #333;
          margin-top: 5px;
        }
        &:hover img{
          border-color: $xtxColor;
        }
        &:hover p{
          color: $xtxColor;
        }
      }
    }
  }
  .goods-body{
    background-color: #fff;
    margin-top: 20px;
    padding: 25px 20px;
    .head{
      h3{
        font-size: 24px;
        text-align: center;
        color: #333;
        display: flex;
        align-items: center;
        justify-content: center;
        &::before,&::after{
          content: '';
          width: 22px;
          height: 2px;
          background-color: #666;
          margin: 0 10px;
        }
      }
    }
    .goods-group{
      display: flex;
      flex-wrap: wrap;
      margin-left: -10px;
      margin-right: -10px;
      .goods-cell{
        width: 20%;
        padding: 0 10px;
        margin-top: 20px;
        :deep() {
          .extra{
            display: none;
          }
        }
      }
    }
  }
}
</style>